/*
 * @Descripttion: 我的站点mixins
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-14 15:52:49
 * @LastEditors: GW
 * @LastEditTime: 2021-09-01 08:50:31
 * 字段太多，分出来方便看
 */
import Api from "@/api/website/mySite"
import Vue from "vue";
import { ACCESS_TOKEN } from "@/store/mutation-types";
export default {
    data () {
        return {
            activeKey: '1',
            labelCol: { span: 5 },
            wrapperCol: { span: 10 },

            // 图片上传参数
            headersData: {
                "Access-Token": Vue.ls.get(ACCESS_TOKEN),
            },
            previewVisible: false,
            previewImage: "",
            fileList: [],//logo地址json

            defaultSetData: {
                bannerDisplayMode: 1,//横幅显示方式: 1图片2视频
                bannerHeight: null,//横幅高度
                bannerImgUrl: null,//横幅图片显示地址
                bannerWidth: null,//横幅宽度
                bgColor: null,//背景色
                bgImgUrl: null,//背景图
                companyId: null,//公司id
                copyrightInfo: null,//版权信息
                domainName: null,//绑定域名
                isVisitsNumber: 0,//访问次数: 0不显示 1显示
                keepRecord: null,//备案号
                keyword: null,//网站关键字
                logoUrl: null,//网站logo地址
                remarks: null,//备注
                seoTitle: null,//首页seo标题
                validityDate: null,//域名有效时间
                websiteUrl: null,//网站地址
            },
            lanmuType: 1,//栏目类型
            navDataSource: [],//导航
            navColumns: [{
                dataIndex: 'name',
                title: '导航名称',
            }, {
                dataIndex: 'url',
                title: '链接地址',
            }, {
                dataIndex: 'parentName',
                title: '上级导航名称',
            }, {
                dataIndex: 'sort',
                title: '排序',
            }, {
                dataIndex: '',
                title: '操作',
                align: 'center',
                scopedSlots: {
                    customRender: 'set'
                }
            }],
            navVisible: false,//导航添加修改弹窗
            navTreeData: [],//导航树数据
            navSaveData: {
                parentName: null,//上级栏目名称
                parentId: null,//上级栏目id
                name: null,//栏目名称
                remarks: null,//备注
                level: null,//级次
                sort: null,//排序
                type: 1,//栏目类型 1：导航 2：栏目
                url: null,//链接地址
            },
            // columnDataSource: [],//栏目
            columnColumns: [{
                dataIndex: 'name',
                title: '栏目名称',
            }, {
                dataIndex: 'url',
                title: '链接地址',
            }, {
                dataIndex: 'parentName',
                title: '上级栏目名称',
            }, {
                dataIndex: '',
                title: '打开方式',
            }, {
                dataIndex: '',
                title: '是否显示',
            }, {
                dataIndex: 'sort',
                title: '排序',
            }, {
                dataIndex: '',
                title: '操作',
                scopedSlots: {
                    customRender: 'set'
                }
            }],

            //页面横幅
            loading: false,
            bannerData: [],
            bannerColumns: [{
                dataIndex: 'bannerUrl',
                title: '横幅图片地址',
                width: 60,
            }, {
                dataIndex: 'bannerWord',
                title: '横幅文字',
                width: 100,
            }]
        }
    },
    methods: {
        //图片上传
        //===============================================
        handleChange ({ fileList }) {
            console.log(fileList);
            if (fileList.length > 1) {
                this.$message.warning('只能上传一张LOGO图片');
                return;
            }
            this.fileList = fileList;
        },
        async handlePreview (file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
        },
        handleCancelImg () {
            this.previewVisible = false;
        },
        //===============================================


        //背景
        beforeUpload (file) {
            const isJpgOrPng =
                file.type === "image/jpeg" || file.type === "image/png";
            if (!isJpgOrPng) {
                this.$message.error("请选择图片文件!");
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error("图片不能超过2MB!");
            }
            return isJpgOrPng && isLt2M;
        },
        handleChangeBgi (info) {
            console.log(info)
            if (info.file.status === "uploading") {
                this.loading = true;
                return;
            }
            if (info.file.status === "done") {
                this.defaultSetData.bgImgUrl = info.file.response.url;
                this.loading = false;
            }
        },


        //栏目和导航的处理
        //===============================================
        modalShow () {
            //新增导航||修改导航
            this.navSaveData = {};
            this.navVisible = true;
        },
        navGetList () {
            //导航 or 栏目 数据获取
            Api.getNavList({ type: this.lanmuType }).then(res => {
                if (res.code === 200) {
                    if (res.data.records.length > 0) {
                        this.navDataSource = this.treeDataFun(res.data.records);
                        console.log(this.navDataSource);
                        this.navTreeData = this.treeDataFun(_.cloneDeep(res.data.records).filter(res => res.level != null));
                    } else {
                        this.navDataSource = [];
                    }
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        treeDataFun (data) {
            //组装树形结构数组
            let backData = _.cloneDeep(data);
            let childernData = [];//子级
            backData.forEach(item => {
                item.title = item.name;
                item.key = item.id;
                if (item.parentId) {
                    childernData.push(item);
                }
            });

            let getGroupNum = (parentId, data) => {
                return data.filter(res => res.parentId == parentId)
            }
            let map = new Map();
            childernData.forEach((item, index) => {
                map.set(item.parentId, getGroupNum(item.parentId, childernData))
            });

            backData.forEach(item => {
                if (map.get(item.id)) {
                    item.children = map.get(item.id)
                }
            });
            backData = backData.filter(res => res.parentId == null);
            return backData;
        },
        treeSelectChange (value, label, extra) {
            console.log(value, label, extra)
            let selectTrue = extra.triggerNode.dataRef;//选中的父级
            console.log(selectTrue)
            this.navSaveData.parentName = selectTrue.name;
            this.navSaveData.parentId = selectTrue.id;

        },
        addColmns () {
            //保存导航 or 保存栏目
            console.log(this.navSaveData)
            //添加级次
            if (!this.navSaveData.parentId) {
                this.navSaveData.level = 1;
            } else {
                this.navDataSource.forEach(item => {
                    if (this.navSaveData.parentId == item.id) {
                        this.navSaveData.level = item.level + 1;
                    }
                });
            }
            if (this.navSaveData.id && this.navSaveData.id == this.navSaveData.parentId) {
                this.$message.warning('上级导航选择错误');
                return;
            }
            this.navSaveData.type = this.lanmuType;//栏目类型

            Api.saveNav(this.navSaveData).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                    this.navVisible = false;
                    this.navGetList();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        editNavData (record) {
            //编辑导航 or 编辑栏目
            this.navVisible = true;
            this.navSaveData = _.cloneDeep(record);
        },
        deleteNavData (record) {
            //删除导航 or 删除栏目
            let _this = this;
            this.$confirm({
                title: "提示",
                content: (
                    <span>
                        是否确认删除?
                    </span>
                ),
                onOk () {
                    Api.deleteNav({ id: record.id }).then((response) => {
                        if (response.code === 200) {
                            _this.$message.success('删除成功');
                            _this.navGetList();
                        } else {
                            // _this.$message.warning(response.message);
                        }
                    }).catch((e) => {
                        // _this.$message.error('请求出错', 1)
                    })
                },
                onCancel () { },
            });
        }
        //===================================================



    }
}